<template>
  <view>
    <view class="picture-card">
      <view class="pic-con">
        <view v-for="(item, index) in imgList" :key="index">
          <template v-if="item.picObj.img_url">
            <view class="pic-box">
              <image
                :src="item.picObj.img_url"
                mode="scaleToFill"
                class="pic-box"
                @click.self="previewImg(item, index)"
              />
              <view class="pic-one" v-if="!item.picObj.status">审核中</view>
            </view>
          </template>
          <template v-else>
            <view class="pic-box" @click="select(index)">
              <image
                src="@/static/common/upload.svg"
                mode="scaleToFill"
                class="p-img"
                v-if="item.icon"
              />
              <uni-icons
                type="plusempty"
                size="40"
                color="#ffc1c1"
                v-else
              ></uni-icons>
              <view class="pic-one" v-if="item.tips">{{ item.tips }}</view>
            </view>
          </template>
        </view>
      </view>

      <view class="pic-tips">
        <image
          src="@/static/common/tips.svg"
          mode="scaleToFill"
          class="t-icon"
        />
        第一张照片必须为孩子正面照片，才可审核通过
      </view>
    </view>
  </view>
</template>

<script setup>
import { setItem, getItem } from "@/utils/storage";

import useStore from "@/store";
const { common, person } = useStore();

const props = defineProps({
  imgList: {
    type: Array,
    default: () => [],
  },
});

const curIndex = ref(0);

// 获取上传状态
const select = (i) => {
  curIndex.value = i;
  common.updatePopupOpen(true, "muban");
};

const fetchImg = () => {
  const img_url = common.uploadImg;
  if (img_url) {
    props.imgList.forEach((v, i) => {
      if (i == curIndex.value) {
        v.picObj = { img_url };
      }
    });
    common.updateUploadImg();
  }
};

// 查看照片
const previewImg = (item, index) => {
  if (!item.picObj.status) return;

  const imgsFilter = props.imgList.filter(
    (v) => v.picObj.img_url && v.picObj.status == 1
  );
  const imgs = imgsFilter.map((v) => v.picObj.img_url);
  const { id } = getItem("user_info");
  person.updatePersonId({ user_id: id, look: 1 });
  setItem("imgs", imgs);
  uni.navigateTo({
    url: "/subPages/preview/index?pageType=my" + "&cur=" + index + "&look=1",
  });
};

onShow(() => {
  fetchImg();
});
</script>

<style lang="scss" scoped>
.pic-con {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pic-box {
  width: 200rpx;
  height: 200rpx;
  background: #fff5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 8rpx;
}

.pic-tips {
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 24rpx;
  color: #666;
  padding: 20rpx 0;
}

.p-img {
  width: 112rpx;
  height: 88rpx;
}

.t-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 10rpx;
}

.pic-one {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 24rpx;
  color: #fff;
  width: 100%;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  background: rgba(0, 0, 0, 0.8);
}

.pic-status {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 24rpx;
  color: #ff5c55;
  width: 100%;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  background: rgba(255, 255, 255, 0.8);
}

.cropper-box {
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 999;
}
</style>
